<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-message"></i>评论列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
          <!-- tabs -->
            <div class="handle-tab">
                <el-tabs v-model="activeTab" @tab-click="changState">
                    <el-tab-pane label="待审核" name=0></el-tab-pane>
                    <el-tab-pane label="审核通过" name=1></el-tab-pane>
                    <!-- <el-tab-pane label="审核不通过" name=2></el-tab-pane> -->
                </el-tabs>
            </div>
            <!-- 筛选条件 -->
            <div style="height:40px"></div>
            <el-form :inline="true"  class="demo-form-inline" style="margin-bottom:15px;">
                <el-form-item label="评论对象类型:">
                    <el-select v-model="type" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.type" :label="item.label" :value="item.type">
                        </el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="用户昵称:">
                    <el-input v-model="nickName" placeholder="请输入用户昵称" clearable style="width:280px;"></el-input>
                </el-form-item>
                
                <el-form-item >
                    <el-button type="primary" @click="onSelect"> &nbsp;&nbsp;查询&nbsp;&nbsp;  </el-button>
                    <el-button type="primary" @click="onResetting"> &nbsp;&nbsp;重置&nbsp;&nbsp;  </el-button>
                </el-form-item>
            </el-form>
            <!-- 表格数据 -->
            <el-table :data="tableData"  style="width: 100%"   ref="multipleTable">
                    <el-table-column prop="id" label="ID" width="100" align="center">
                    </el-table-column>
                    <el-table-column label="头像" width="120" align="center">
                        <template slot-scope="scope" >
                            <div><img :src="scope.row.logo" style="width:60px;height:60px"></div>
                        </template>
                    </el-table-column>
                     <el-table-column prop="nick_name" label="用户昵称" width="450" align="center">
                    </el-table-column>
                     <el-table-column prop="trans_type" label="评论对象类型" width="150" align="center">
                    </el-table-column>
                    <el-table-column type="expand" label="查看评论信息" width="150" align="center">
                        <template slot-scope="props">
                            <div class="bs-callout bs-callout-danger">
                                <h1> 评论信息</h1>
                                <p><strong>评论标题：</strong>{{props.row.title}}</p>
                                <p><strong>评论内容: </strong>{{props.row.content}}</p>
                            </div>
                        </template>
                    </el-table-column>
                     <el-table-column prop="create_time" label="评论时间" width="200" align="center">
                    </el-table-column>
                     <el-table-column prop="trans_state" label="审核状态" width="150" align="center">
                    </el-table-column>
                    <el-table-column label="操作" align="center"  >
                        <template slot-scope="scope"  >
                            <!-- <el-button class="edit" size="small" type="text" @click="handleLook(scope.$index, scope.row)">查看</el-button> -->
                            <el-button class="edit" size="small" type="text"  @click="handleCheck(scope.$index, scope.row)" v-show="scope.row.state==0">审核</el-button>
                            <el-button class="del" size="small" type="text"  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination" v-show="totalPages>1">
                <el-pagination v-if="paginationShow" @current-change="handleCurrentChange" :current-page.sync="pageIndex" layout="prev, pager, next" :page-size="pageSize" :total="totalElements" background>
                </el-pagination>
            </div> 
        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>

             <!-- 审核操作弹出界面 -->
            <el-dialog title="审核" :visible.sync="isChecked"  center width="450px">
                <el-form style="width:400px; margin:0 auto">
                    <el-form-item label="评论对象类型：">
                        {{listData.trans_type}}
                    </el-form-item>
                    <el-form-item label="评论内容：">
                         {{listData.content}}
                    </el-form-item>
                     <el-form-item label="用户昵称：">
                         {{listData.nick_name}}
                    </el-form-item> 
                    <el-form-item label="审核状态：">
                        <div>
                            <el-radio v-model="state" label="1" border>审核通过</el-radio>
                            <el-radio v-model="state" label="2" border>审核不通过</el-radio>
                        </div>
                    </el-form-item> 
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="isChecked = false">取 消</el-button>
                    <el-button type="primary" @click="confirmCheck">确 定</el-button>
                </div>
            </el-dialog>    
        </div>
       
    </div>
</template>
<script>
import {getCommentList,postcommenteDelete,postCommentState} from '@/api/check/review'

export default {
    name:"checkPublishList",
    data() {
        return {
            pageIndex:1,//当前页码  
            pageSize:10,//每页10条
            paginationShow:true,//重新显示分页
            totalElements:1,//默认的总条数
            totalPages:1,//默认的总页数
            tableData:[],//表格数据
            activeTab:'0',
            delVisible:false, //默认dialog 不弹出
            title:'', //标题
            mobile:'',//手机号码
            nickName:'',//用户昵称
            options:[ {type:1,label:'故事与回忆'},{type:2,label:'话题'},{type:3,label:'学院'},
                      {type:4,label:'协会'},{type:5,label:'媒体'},{type:6,label:'心情'},  
                      {type:7,label:'动态'},{type:8,label:'评测'},{type:9,label:'活动'},  
                      {type:10,label:'印厂'},{type:11,label:'展会'},{type:12,label:'二手'} 
            ],//审核状态option选项  评论对象类型：1故事回忆，2话题，3学院，4协会，5媒体，6心情，7动态，8评测，9活动，10印厂，11展会 12二手
            type:'',//下来选中 与options关联
            state:"0",//审核状态：0待审核，1审核通过，2审核不通过
            isChecked:false,//审核界面默认隐藏 true显示
            listData:{},//获取到详情的数据
            id:'',//当前用户id
        }
    },
    //实例创建
    created(){
        //评论对象类型默认为第一个
        this.type=1;
        this.getDate();
    },
    //计算属性
    computed:{
        // if(isFlag){
        //     this.getDate();
        // }
    },
    //方法
    methods: {
        //获取数据
        getDate(){
            let type=this.type;
            let state=this.state;
            let nickName=this.nickName;
            let mobile=this.mobile;
            let pageIndex=this.pageIndex;
            let pageSize=this.pageSize;

            getCommentList(type,state,nickName,mobile,pageIndex,pageSize).then((response)=> {
                if(response.code==200){
                    var data = response.data;//当前返回的数据
                    this.tableData = data.list;//列表数据
                    this.totalElements = data.total; //总条数
                    this.totalPages = Math.ceil(data.total/this.pageSize);//总页数
                }else{
                    this.$notify.error({
                        title: '异常',
                        offset: 100,
                        message: response.msg
                    });
                }
            })
        },
        //获取详情数据
        getDetails(){
            let data = this.tableData;
            //遍历数据取详情
                for(let i=0;i<data.length;i++){
                    if(data[i].id == this.id){//找到了
                        this.listData = data[i];
                    }
                }
        },
        //发布
        urlAdd(){
            this.$router.push({ path:'/substation/add'})
        },
        //查询
        onSelect(){
            this.pageIndex =1;
            this.getDate();
        },
        //重置筛选条件
        onResetting(){
            this.type = 1;
            this.nickName = '';
            this.title = '';
            this.getDate();
        },
        //tabs切换触发
        changState(tab) {
            this.activeTab = tab.name;//改变tab激活项
            this.state=tab.name;
            this.pageIndex=1;

            this.paginationShow = false   //分页器消失
            this.$nextTick(function () {
                //分页器重新加载 解决element 分页器的无法触发current-change事件 只限在tabs页 
                this.paginationShow = true  
            })

            this.getDate();
        },
        //分页
        handleCurrentChange(val){
            this.pageIndex =val;
            this.getDate();
        },
       //查看详情
        handleLook(index,row){
            if(row.id && row.id>0){
                //跳转到详情页
                this.$router.push({ path: '/enterprise/details',query:{id:row.id}});
            }
        },
        //去审核（显示审核界面）
        handleCheck(index,row){
            // console.log("我是子组件"+index,row);
            if(row.id && row.id>0){
                this.id = row.id; //当前对象id
                this.getDetails();//获得数据
                this.isChecked = true; //显示弹出框
               
            }
        },
        // 确定提交审核
        confirmCheck(){
            let _this = this;
            if(this.id>0){
                // console.log(_this.id)
                postCommentState(_this.id,_this.state).then(response=>{
                    // console.log(response);
                    if(response.code==200){
                        _this.$message.success('操作成功');
                        _this.isChecked = false;
                        this.state=0;
                        _this.getDate(); //重新加载
                        
                    }else{
                        _this.$notify.error({
                            title: '操作失败',
                            duration:2000,
                            message: '失败原因：'+response.data.msg
                        });
                    }
                    
                })
            }
        },
         //删除
        handleDelete(index, row) {
        // console.log(index,row.id);
        if (row.id && row.id > 0) {
            this.delIndex = index; //要删除的下标
            this.delId = row.id; //要删除的ID
            this.delVisible = true; //显示兑换弹出框
        } else {
            // console.log("没触发");
        }
        },
            // 确定删除
    deleteRow() {
      if (this.delId > 0) {
        postcommenteDelete(this.delId).then(response => {
          if (response.code == 200) {
            this.tableData.splice(this.delIndex, 1);
            this.$message.success("操作成功");
            this.delVisible = false;
            this.getDate(); //重新加载
          } else {
            this.$notify.error({
              title: "操作失败",
              duration: 2000,
              message: "失败原因：" + response.data.msg
            });
          }
        });
      }
    }
    }
}
</script>
<style lang="stylus" scoped>
    .edit{
        color #ff9800;
    }
    .del{
        color #e51c23;
    }
    .download{
        color #67C23A;
    }
</style>


